
<template>
    <view class="lianxi">
        <navigator url="/pages/qiao-crm/qiao-sousuo/qiaoSousuo"
        open-type="navigate" hover-class="navigator-hover" style="color: blue;">
            关闭
        </navigator>
        <view>选择时间范围</view>
        <view></view>
    </view>
    <view>
        <view class="uni-padding-wrap">
            <view class="uni-title" @tap="dateClick">
                日期：{{ dateObj.nian }}年{{ dateObj.yue }}月{{ dateObj.ri }}日
            </view>
        </view>
        <uni-popup class="popup-layout" ref="popup_ref" type="bottom" :maskClick=false>
            <view class="popup-opera-layout">
                <view class="popup-opera-left" @tap="datePickerCancel">
                    取消
                </view>
                <view class="popup-opera-center">
                    选择日期
                </view>
                <view class="popup-opera-right" @tap="datePickerConfirm">
                    确定
                </view>
            </view>
            <picker-view class="popup-view-layout" :value="defaultValue" :indicator-style="indicatorStyle"
                @change="datePickerChange">
                <picker-view-column>
                    <view class="popup-view-item" v-for="(item, index) in  datePickerObj.yearArr" :key="index">{{ item }}年
                    </view>
                </picker-view-column>
                <picker-view-column>
                    <view class="popup-view-item" v-for="(item, index) in datePickerObj.monthArr" :key="index">{{ item }}月
                    </view>
                </picker-view-column>
                <picker-view-column>
                    <view class="popup-view-item" v-for="(item, index) in datePickerObj.dayArr" :key="index">{{ item }}日
                    </view>
                </picker-view-column>
            </picker-view>
        </uni-popup>
    </view>
</template>

<script>


export default {
    data() {
        var curDate = new Date()
        var datePickerObj = {
            yearArr: [],
            monthArr: [],
            dayArr: [],
            curYear: curDate.getFullYear(),
            curMonth: curDate.getMonth() + 1,
            curDay: curDate.getDate()
        }

        for (let i = 2020; i <= curDate.getFullYear(); i++) {
            datePickerObj.yearArr.push(i)
        }

        for (let i = 1; i <= 12; i++) {
            datePickerObj.monthArr.push(i)
        }

        for (let i = 1; i <= 31; i++) {
            datePickerObj.dayArr.push(i)
        }
        return {
            datePickerObj,
            defaultValue: [datePickerObj.yearArr[datePickerObj.yearArr.length - 1],
            datePickerObj.curMonth - 1, datePickerObj.curDay - 1],
            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync()
                .screenWidth / (750 / 100))}px;`,
            dateObj: {
                nian: '',
                yue: '',
                ri: ''
            }


        }
    },
    methods: {
        datePickerChange(e) {
            var that = this;
            let cMonth;
            let cYear;
            console.log(e);
            let val = e.detail.value;
            cYear = that.datePickerObj.yearArr[val[0]];
            cMonth = that.datePickerObj.monthArr[val[1]];
            that.datePickerObj.curDay = that.datePickerObj.dayArr[val[2]];
            that.datePickerObj.curMonth = cMonth;
            that.datePickerObj.curYear = cYear;
            that.datePickerObj.dayArr = [];
            if (cMonth || y) {
                if (cMonth == 1 || cMonth == 3 || cMonth == 5 || cMonth == 7
                    || cMonth == 8 || cMonth == 10 || cMonth == 12) {
                    for (let i = 1; i <= 31; i++) {
                        that.datePickerObj.dayArr.push(i)
                    }
                } else if (cMonth == 4 || cMonth == 6 || cMonth == 11 || cMonth == 9) {
                    for (let i = 1; i <= 30; i++) {
                        that.datePickerObj.dayArr.push(i)
                    }

                } else if (cMonth == 2) {
                    if (that.datePickerObj.curYear % 4 == 0
                        && (that.datePickerObj.curYear % 100 != 0
                            || that.datePickerObj.curYear % 400 == 0)) {
                        for (let i = 1; i <= 29; i++) {
                            that.datePickerObj.dayArr.push(i)
                        }
                    } else {
                        for (let i = 1; i <= 28; i++) {
                            that.datePickerObj.dayArr.push(i)
                        }
                    }
                }

            }
        },
        dateClick() {
            this.$refs.popup_ref.open();
        },
        datePickerCancel() {
            this.$refs.popup_ref.close();
        },
        datePickerConfirm() {
            this.dateObj.nian = this.datePickerObj.curYear;
            this.dateObj.yue = this.datePickerObj.curMonth;
            this.dateObj.ri = this.datePickerObj.curDay;
            this.$refs.popup_ref.close();
        }
    }
}



</script>

<style lang="scss">
.guanbi {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid #F0F0F0;
}

.uni-title {
    margin-top: 100px;
    text-align: center;
}

.popup-layout {
    position: absolute;
    bottom: 0;
    width: 100vw;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #FFFFFF;
}

.popup-opera-layout {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20px 15px;
    border-bottom: black solid 1px;
}

.popup-opera-left {
    color: white;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 20px;
    background-color: #BEBEBE;
}

.popup-opera-center {
    color: #333333;
    font-size: 17px;
    text-align: center;
    border-radius: 8px;
}


.popup-opera-right {
    color: #FFFFFF;
    font-size: 13px;
    text-align: center;
    border-radius: 8px;
    padding: 5px 20px;
    background-color: #1cb419;
}


.popup-view-layout {
    background-color: #EEEEEE;
    width: 100%;
    height: 150px;
}

.popup-view-item {
    line-height: 50px;
    text-align: center;
    font-size: 17px;
    text-align: center;
}















.lianxi {
    width: 330px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 3px 20px;
    position: fixed;
    height: 40px;
    background-color: white;
    top: 0px;
    left: 0px;
}
</style>